<!DOCTYPE html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
	<div class="container-fluid">
		<div class="card">
			<div class="card-body">
				<div id="toolbar" style="width: 70vw;">
					<form class="row" role="form" onsubmit="javascript:return false;">
						<div class="col-md-3">
							<div class="row">
								<label class="col-md-3 col-form-label" for="username">用户名</label>
								<div class="col-md-9">
									<input type="text" class="form-control" name="username" />
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<button class="btn btn-primary" data-toggle="tableSearch">搜索</button>
							<button type="reset" class="btn btn-default ms-1">重置</button>
						</div>
					</form>
					<div class="mt-2">
						<button class="btn btn-primary me-1" data-handle="add" data-perm="user/add" hidden><i class="mdi mdi-plus"></i>
							新增</button>
					</div>
				</div>
				<table id="table"></table>
			</div>
		</div>
	</div>
	<script id="dialog" type="text/html">
		<form class="needs-validation" novalidate  id="dialogForm">
			<input type="text" name="id" hidden>
		  <div class="row mb-3">
		    <label for="username" class="col-sm-2 col-form-label text-end required">用户名</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="username" required>
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="mobile" class="col-sm-2 col-form-label text-end required">电话</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="mobile" required phone=true>
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="email" class="col-sm-2 col-form-label text-end">邮箱</label>
		    <div class="col-sm-10">
		      <input type="email" class="form-control" name="email" email >
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="email" class="col-sm-2 col-form-label text-end required">角色</label>
		    <div class="col-sm-10">
		        <select class="form-control selectpicker" id="roleIds" multiple required></select>
		    </div>
		  </div>
		  <div class="row">
			 <div class="col-md-4 offset-md-8">
				<button type="button" class="btn btn-secondary me-1 " data-bs-dismiss="modal">取消</button>
				<button type="submit" class="btn btn-primary">保存</button>
			</div>
		  </div>
		</form>
	</script>
	<script type="module">
		import admin from "/admin/js/admin.js"
		var layer = admin.getModule("layer");
		var request = admin.getModule("request");
		var button = admin.getModule("button");
		var form = admin.getModule("form");
		var table = admin.getModule("table");

		var dialogHtml = $("#dialog").html();
		var dialogData = {
			handle: '',
			dialog: null,
		};

		var tableInst = table.initTable({
			elem: "#table",
			url: 'user/search',// 请求地址
			showColumns: true, //显示所有列
			columns: [{
				field: 'username',
				align: 'center',
				title: '用户名',
			}, {
				field: 'mobile',
				align: 'center',
				title: '电话',
			}, {
				field: 'email',
				// 是否可视(默认 - true)
				align: 'center',
				title: '邮箱'
			}, {
				field: 'createtime',
				align: 'center',
				title: '创建时间'
			}, {
				title: '操作',
				formatter: btnGroup,  // 自定义方法
				events: {
					'click .edit-btn': edit,
					'click .del-btn': deleteHandle
				}
			}]
		})

		$('[data-handle="add"]').click(function () {
			add();
		})



		function add() {
			dialogData.handle = "user/add";
			dialogData.dialog = layer.dialog("添加用户", dialogHtml);
			dialogEvent();
			initSelect();
		}

		function edit(e, value, row, index) {
			dialogData.handle = "user/edit";
			dialogData.dialog = layer.dialog("修改用户", dialogHtml);
			dialogEvent();
			$("#dialogForm input[name='username']").attr("disabled", "true")
			request.post('user/detail', {id: row.id}).then((res) => {
				var tempData = res.data;
				form.val("#dialogForm", tempData)
				initSelect(tempData.roleIds);
			})
		}

		function deleteHandle(e, value, row, index) {
			layer.confirm("确认删除用户" + row.username, function () {
				request.postAlert("user/delete", {id: row.id}).then(res => {
					tableInst.bootstrapTable("refresh");
				})
			})
		}

		function dialogEvent() {
			$("#dialogForm").submit(function () {
				var btn = button.load({elem: "#dialogForm button[type='submit']"});
				if (!form.validate($(this))) {
					btn.stop();
					return false;
				}
				var data = form.val($(this));
				data.roleIds = $("#roleIds").selectpicker('val');
				request.postAlert(dialogData.handle, data).then(res => {
					dialogData.dialog.hide();
					tableInst.bootstrapTable("refresh");
				}).catch(err => {
					btn.stop();
				})
				return false;
			})
		}

		function initSelect(data) {
			$("#roleIds").html();
			request.post("role/listAll").then(res => {
				res.data.forEach(item => {
					var option = `<option value="${item.id}">${item.name}</option>`;
					$("#roleIds").append(option);
				})
				$("#roleIds").selectpicker('val', data);
			})
		}

		// 自定义操作按钮
		function btnGroup() {
			let html =
				'<a href="#!" class="btn btn-sm btn-default me-1 edit-btn" title="编辑" data-perm="user/edit" hidden><i class="mdi mdi-pencil"></i></a>' +
				'<a href="#!" class="btn btn-sm btn-default del-btn"  title="删除" data-perm="user/delete" hidden><i class="mdi mdi-trash-can-outline"></i></a>';
			return html;
		}

	</script>
</body>

</html>